import request from "../../utils/request";
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList: [],
    navId: 0,
    videoList: [],
    videoId: '',
    currentTimeUpdate: [],
    isTriggered: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getVideoCategoryList()
  },

  async getVideoCategoryList() {
    let videoGroupData =  await request("/video/group/list",{})
    this.setData({
      videoGroupList: videoGroupData.data.slice(0, 14),
      navId: videoGroupData.data[0].id
    })

    // 进行取id
    this.getVideoGroupDataList(this.data.navId)
  },

  async getVideoGroupDataList(navId) {
    // TODO
    /*let videoGroupDataList =  await request("/video/group",{id: navId})
    console.log(videoGroupDataList)*/
    /*取不到这个数据，但是我看/video/timeline/all可以查到视频数据，那就拿它开刀吧,主要还是数据格式还是一样的*/
    let videoGroupDataList =  await request("/video/timeline/all",{})
    // let index = 0
    let videoPromises = videoGroupDataList.datas.map(async (item,index) => {
      item.id = index
      let urlData = await request("/video/url",{id: item.data.vid})
      item.data.urlInfo = urlData.urls[0]
      return item
    })

    // 等待所有异步请求完成
    let videoList = await Promise.all(videoPromises);


    this.setData({
      videoList,
      isTriggered: false/*这里让三个点结束*/
    })
  },

  changeNav(event) {
    let navId = event.currentTarget.id
    this.setData({
      /*将字符串转成数字*/
      //navId: navId*1
      navId: navId >>> 0
    })
  },

  handlePlay(event) {
    /*
    * 需求：
    *   点击下一个视频播放的时候关闭上一个视频
    * 关键：
    *   1. 如何找到上一个视频的实例对象
    *   2. 如何确定点击的对象和现在不是同一个对象
    * */
    let vid = event.currentTarget.id
    /*
    * 判断是否同一个id，如果同一个视频，不要执行stop停止，继续播放
    * 如果不为空一个vid, 判断是否是第一次点击，如果第一次点击，不要停止，去播放
    * 如果vid不一样，且不是第一次点击，就停止上一次的
    * */
    //this.vid !== vid && this.videoContext && this.videoContext.stop()

    this.setData({
      videoId: vid
    })

    //this.vid = vid
    this.videoContext =  wx.createVideoContext(vid)
    let {currentTimeUpdate} = this.data
    let  timeUpdateItem =  currentTimeUpdate.find(item => item.vid ===  vid)
    if(timeUpdateItem) {
      this.videoContext.seek(timeUpdateItem.currentTime)
    } else {
      this.videoContext.play()
    }
  },

  handleTimeUpdate(event) {
    let currentTimeUpdateData = {vid: event.currentTarget.id, currentTime: event.detail.currentTime}
    /*
    * 如果当前时间更新列表中存在此视频就更新时间，保证最新的时间
    * 如果当前时间更新列表中不存在此视频就添加此视频
    * */
    let {currentTimeUpdate} = this.data

    let currentTimeItem = currentTimeUpdate.find(item => item.vid === currentTimeUpdateData.vid)
    if(currentTimeItem) {// 之前有
      currentTimeItem.currentTime = currentTimeUpdateData.currentTime
    } else {
      currentTimeUpdate.push(currentTimeUpdateData)
    }
    this.setData({
      currentTimeUpdate
    })
  },


  handleEnded(event) {
    /*
    * 判断当前时间更新列表中是否存在此视频，如果存在，删除此视频
    * */
    let {currentTimeUpdate} = this.data
    let index = currentTimeUpdate.findIndex(item => item.vid === event.currentTarget.id)
    if (index !== -1) {
      currentTimeUpdate.splice(index, 1)
      this.setData({
        currentTimeUpdate
      })
    }
  },

  handleRefresh() {
    this.getVideoGroupDataList(this.data.navId)
  },

  handleToLower() {
    console.log("触底了！！")
    // 数据分页的效果 后端分页  前端分页
    console.log("发送请求 || 将分页的下面数据 追加到列表的后方即可")


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    console.log(from)
    /*from 页面是button, 右上角三个点是menu , 这个需要区分就这么区分。
    * 实际看官方文档了，里面可以自定义内容
    * 分享后内容，需要查看要开权限的，在小程序页面中成员管理处设置成员。
    * */
  }
})
